<template>
<div class="box">
  <div class="left">
    <div class="nav">
      <button  @click="showadd"  >新增聊天室</button>
      <button @click="showjoin"> 加入聊天室</button>
      <div class="chatroomForm"  v-if="showAdd">
        <!-- 表单内容 -->
        <h3>新建聊天室</h3>
        <label for="chatroomName">聊天室名称：</label>
        <input type="text" id="chatroomName" v-model="rooms.roomname" required>
        <button type="submit" id="submitChatroom" @click="addone">创建</button>
        <button type="button" id="cancelChatroom"@click="cancle(SHOWPOPOVER.ADD)">取消</button>
      </div>
      <div class="joinChatroomForm"  v-if="showJoin">
         表单内容
        <h3>加入聊天室</h3>
        <label for="chatroomName">聊天室名称：</label>
        <input type="text" id="chatroomName" required v-model="joinroom. roomname">
        <button type="submit" id="submitChatroom" @click="joinone" >加入</button>
        <button type="button" id="cancelChatroom" @click="cancle(SHOWPOPOVER.JOIN)">取消</button>
      </div>
    </div>

    <div class="chatrooms">
      <room-box v-for="room in chatrooms" :room="room" @click="selectmessage(room.roomname)" :key="room.roomname"/>
    </div>
  </div>
  <div class="right">
  <div class="message">
    <div v-for="message in messages" :message="message" :key="message.id" :is-me="chekisMe(message.owner)" :class="{ 'my-bubble': chekisMe(message.owner), 'yourbubble': !chekisMe(message.owner)}">
        <div v-if="chekisMe(message.owner)" class="my-bubble">
          <bubble :is-me="chekisMe(message.owner)"  :message="message" ></bubble>
        </div>
      <div v-else class="yourbubble" >
        <bubble :is-me="chekisMe(message.owner)"  :message="message" ></bubble>
      </div>
    </div>
  </div>
   <div class="message-box">
     <chat @send-message="sendmessage"></chat>
   </div>
  </div>
</div>
</template>
<script  lang="ts">
import {defineComponent} from "vue";
import {Rooms}  from "../api/rooms";
import {Message} from "../api/message";
import {SocketIO} from "../utils/socket.io";
import {SOCKET} from "../configs";
import {mapMutations,mapState} from "vuex";
import bubble from "@/components/bubble.vue";
import roomBox from "@/components/roomBox.vue";
import  chat from  "@/components/chat.vue";
enum  SHOWPOPOVER{
  ADD=1,
  JOIN=2,
}
export default defineComponent({
  name: "Layout",
  components:{roomBox,bubble,chat},
  data() {
    return {
      chatrooms: [] as Rooms[],
      selectedChatroom: null,
      messages: [] as Message [],
      rooms:new Rooms(),
      joinroom:new Rooms(),
      messagesend:new Message(),
      io:new SocketIO(SOCKET),
      showAdd:false,
      showJoin:false,
      SHOWPOPOVER,
    }
  },
  computed: {
    ...mapState(['username','roomname']),
  },
  mounted() {
    this.getrooms();
    this.io.onMessage(this.selectmessage) // 监听消息事件,如果收到消息，此处会调用，然后会重绘
  },
  methods: {
    ...mapMutations(['setRoomname']),
    chekisMe(username:string)
    {
      console.log(username,this.username)
      return username===this.username
    },
    showadd()
    {
      this.showAdd=true
      console.log(this.showAdd)
    },
    showjoin()
    {
      this.showJoin=true
    },
    cancle(type: SHOWPOPOVER) {
      if(type === SHOWPOPOVER.ADD) {
        this.showAdd = false;
      }
      if(type === SHOWPOPOVER.JOIN) {
        this.showJoin = false;
      }
    },
    getrooms() {
      console.log(this.username, sessionStorage.getItem('username'))
      this.rooms.show(this.username).then(res => {
        this.rooms.show(this.username).then(res => {
          console.log('res',res);
          console.log('this.username',this.username);
         this.chatrooms.splice(0); // 清空原有数据
          this.chatrooms.push(...res); // 将新数据添加到 chatrooms 中
          console.log(res);

        });

      })
    },
    selectmessage(room:string) {
      this.setRoomname(room)
      this.io.joinRoom(room)
      Rooms.getmessage(room).then(res=>{

            this.messages=[]
            this.messages.push(...res)
            console.log(this.messages)
          }
      )
    },
    addone()
    {
      this.rooms.personall=1;
      this.rooms.persononline=1;
      this.rooms.owner=this.username
      console.log(this.rooms)
      this.rooms.create().then(res=>{
        if(res==true)
        {
          console.log("创建成功");
          this.getrooms()
        }
        else
        {
          console.log("创建失败");
        }}
      )
    },
    joinone() {
      // var name =
      console.log("roomname :"+this.joinroom.roomname);

      this.rooms.join(this.joinroom.roomname,this.username).then(res => {
        if (res == true) {
          console.log("加入成功");
          this.getrooms()
        } else {
          console.log("加入失败");
        }
      })

    },
    sendmessage(message:string) {
      if (typeof this.roomname === 'string') {
        this.messagesend.message=message;
        this.messagesend.owner=<string>this.username;
        this.messagesend.roomname=<string>this.roomname;
        console.log(this.messagesend)
       this.io.sendMessage(this.username,this.roomname,this.messagesend.message);
      }
    }


  }
})
</script>
<style scoped>

/*layout的css*/
.box{
  background-color: honeydew;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
  width: 100%;
}

.left{
  background-color: #86DBFF;
  flex: 0 0 400px;
}
.right
{
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

.my-bubble{
  display: flex;
  flex-direction: row;
  justify-content: flex-end; /* 自己发的消息在右侧 */
  //background-color: #f5f5f5;
  color: #6676FF;
  width: 100%;
}


.yourbubble {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  //background-color: #e0f2f1;
  color: #00897b;
  width: 100%;
}
.message {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}

.tosend:active{
  background-color: #86DBFF;
}
.nav{
  display: flex;
  justify-content: space-around;
  justify-items: center;
  background-color: #6676FF;
  border: 1px solid #6676FF;
}


.chatrooms {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 15px; /* 调整列表项之间的间距 */
  margin: 20px;
}

.chatroom {
  background-color: #f5f5f5;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  width: calc(33% - 0.66667rem); /* /* 调整列表项宽度以适应屏幕宽度 */
}
.chatroom:hover {
  background-color: #c5e1e8; /* 更改背景色以表示鼠标悬停状态 */
  cursor: pointer; /* 更改鼠标样式为手形，暗示可点击 */
  transform: translateY(-2px); /* 微微上移以模拟按下效果 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 加强阴影效果 */
}

.chatroom-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.chatroom-details {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.chatroom-details li {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

.chatroom-details strong {
  color: #333;
  display: inline-block;
  margin-right: 0.5rem;
  min-width: 6rem;
}
.message-box {
  position: absolute;
  bottom: 0px;
  width: 100%;
 }

</style>
